<template>
  <div class="content">
    <div v-for="(question, bigIndex) in questions" :key="bigIndex"  v-show="currentPage === 1">
      <div class="div-question " :class="border.div3">
        <div class="title-question">
          <span class="required">*</span>
          {{ question.question }}
          <div style="margin-top:8px;"></div>
          <div class="grade-radio" v-for=" (option, index) in  question.options " :key="index">
            <el-radio v-model="form[bigIndex].answer" :label="(index + 1).toString() + question.options.length"
              class="grade-bgc">
              {{ option }}
            </el-radio>
          </div>
          <div class="error-tips" v-if="border.div3">
            请选择选项
          </div>
        </div>
      </div>
    </div>
    <!-- 矩形量表题25  前瞻能力 -->
    <div class="div-question " :class="border.div6" v-show="currentPage === 2">
      <div class="title-question">
        <span class="required">*</span>
        以下题目主要了解近一个月内您的工作精力充沛程度，请根据您的真实情况作答。
        <div style="margin-top:8px;"></div>
        <el-table :data="matrixQues.question25" style="width: 100%" ref="myTable1">
          <el-table-column property="title" width="170">
          </el-table-column>
          <el-table-column property="date" label="从不" width="80">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status" :label="117" class="grade-bgc single-line hide bigred"></el-radio>
            </template>
          </el-table-column>
          <el-table-column property="name" label="很少" width="80">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status" :label="127" class="grade-bgc single-line hide midred"></el-radio>
            </template>
          </el-table-column>
          <el-table-column property="name" label="较少" width="80">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status" :label="137" class="grade-bgc single-line hide smallred"></el-radio>
            </template>
          </el-table-column>
          <el-table-column property="name" label="适中" width="80">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status" :label="147" class="grade-bgc single-line hide defau"></el-radio>
            </template>
          </el-table-column>
          <el-table-column property="name" label="较多" width="80">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status" :label="157" class="grade-bgc single-line hide smallblue"></el-radio>
            </template>
          </el-table-column>
          <el-table-column property="name" label="经常" width="80">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status" :label="167" class="grade-bgc single-line hide midblue"></el-radio>
            </template>
          </el-table-column>
          <el-table-column property="name" label="总是" width="80">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status" :label="177" class="grade-bgc single-line hide bigblue"></el-radio>
            </template>
          </el-table-column>
        </el-table>
        <div class="error-tips" v-if="border.div6">
          此题为必答题，请回答小题
        </div>
      </div>
    </div>
    <!-- 矩形量表题26 宽频能力-->
    <!-- <div class="div-question " :class="border.div6" v-show="currentPage === 3">
      <div class="title-question">
        <span class="required">*</span>
        以下题目评估近一年来您的特定工作行为频次，请根据您的真实情况回答。注意答案无好坏对错之分，仅用于归类整理分析。
        <div style="margin-top:8px;"></div>
        <el-table :data="matrixQues.question26" style="width: 100%" ref="myTable2">
          <el-table-column property="title" width="170">
          </el-table-column>
          <el-table-column property="date" label="从不" width="80">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status" :label="217" class="grade-bgc single-line hide bigred"></el-radio>
            </template>
          </el-table-column>
          <el-table-column property="name" label="很少" width="80">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status" :label="227" class="grade-bgc single-line hide midred"></el-radio>
            </template>
          </el-table-column>
          <el-table-column property="name" label="较少" width="80">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status" :label="237" class="grade-bgc single-line hide smallred"></el-radio>
            </template>
          </el-table-column>
          <el-table-column property="name" label="适中" width="80">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status" :label="247" class="grade-bgc single-line hide defau"></el-radio>
            </template>
          </el-table-column>
          <el-table-column property="name" label="较多" width="80">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status" :label="257" class="grade-bgc single-line hide smallblue"></el-radio>
            </template>
          </el-table-column>
          <el-table-column property="name" label="经常" width="80">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status" :label="267" class="grade-bgc single-line hide midblue"></el-radio>
            </template>
          </el-table-column>
          <el-table-column property="name" label="总是" width="80">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status" :label="277" class="grade-bgc single-line hide bigblue"></el-radio>
            </template>
          </el-table-column>
        </el-table>
        <div class="error-tips" v-if="border.div6">
          此题为必答题，请回答小题
        </div>
      </div>
    </div> -->
    <!-- 矩形量表题27 抗压能力-->
    <div class="div-question " :class="border.div6" v-show="currentPage === 2">
      <div class="title-question">
        <span class="required">*</span>
        以下题目用于评估您的自我认识倾向。请根据您的真实情况，对下面每个阐述，选出最符合你的一项。注意回答这些问题没有好坏对错之分。
        <div style="margin-top:8px;"></div>
        <el-table :data="matrixQues.question27" style="width: 100%" ref="myTable3">
          <el-table-column property="title" width="170">
          </el-table-column>
          <el-table-column property="date" label="从来不" width="120">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status" :label="315" class="grade-bgc single-line hide midred"></el-radio>
            </template>
          </el-table-column>
          <el-table-column property="name" label="很少" width="120">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status" :label="325" class="grade-bgc single-line hide smallred"></el-radio>
            </template>
          </el-table-column>
          <el-table-column property="name" label="有时" width="120">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status" :label="335" class="grade-bgc single-line hide defau"></el-radio>
            </template>
          </el-table-column>
          <el-table-column property="name" label="经常" width="120">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status" :label="345" class="grade-bgc single-line hide smallblue"></el-radio>
            </template>
          </el-table-column>
          <el-table-column property="name" label="一直如此" width="80">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status" :label="355" class="grade-bgc single-line hide midblue"></el-radio>
            </template>
          </el-table-column>
        </el-table>
        <div class="error-tips" v-if="border.div6">
          此题为必答题，请回答小题
        </div>
      </div>
    </div>
    <!-- 矩形量表题28 情绪调节能力-->
    <div class="div-question " :class="border.div6" v-show="currentPage === 3">
      <div class="title-question">
        <span class="required">*</span>
        下面是一些与您的情绪生活有关的描述，主要了解您如何看待自身情绪。请仔细阅读每一个描述，根据您的直观感受做出选择。
        <div style="margin-top:8px;"></div>
        <el-table :data="matrixQues.question28" style="width: 100%" ref="myTable4">
          <el-table-column property="title" width="170">
          </el-table-column>
          <el-table-column property="date" label="从来不" width="120">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status" :label="415" class="grade-bgc single-line hide midred"></el-radio>
            </template>
          </el-table-column>
          <el-table-column property="name" label="很少" width="120">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status" :label="425" class="grade-bgc single-line hide smallred"></el-radio>
            </template>
          </el-table-column>
          <el-table-column property="name" label="有时" width="120">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status" :label="435" class="grade-bgc single-line hide defau"></el-radio>
            </template>
          </el-table-column>
          <el-table-column property="name" label="经常" width="120">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status" :label="445" class="grade-bgc single-line hide smallblue"></el-radio>
            </template>
          </el-table-column>
          <el-table-column property="name" label="一直如此" width="80">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status" :label="455" class="grade-bgc single-line hide midblue"></el-radio>
            </template>
          </el-table-column>
        </el-table>
        <div class="error-tips" v-if="border.div6">
          此题为必答题，请回答小题
        </div>
      </div>
    </div>
    <!-- 矩形量表题29 职业倦怠-->
    <div class="div-question " :class="border.div6" v-show="currentPage === 3">
      <div class="title-question">
        <span class="required">*</span>
        请您根据自己的感受和体会，判断下列现象在您身上发生的频率并作出选择。
        <div style="margin-top:8px;"></div>
        <el-table :data="matrixQues.question29" style="width: 100%" ref="myTable5">
          <el-table-column property="title" width="170">
          </el-table-column>
          <el-table-column property="date" label="从不" width="80">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status" :label="517" class="grade-bgc single-line hide bigred"></el-radio>
            </template>
          </el-table-column>
          <el-table-column property="name" label="极少一年几次或更少" width="80">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status" :label="527" class="grade-bgc single-line hide midred"></el-radio>
            </template>
          </el-table-column>
          <el-table-column property="name" label="偶尔一个月一次或者更少" width="80">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status" :label="537" class="grade-bgc single-line hide smallred"></el-radio>
            </template>
          </el-table-column>
          <el-table-column property="name" label="经常一个月几次" width="80">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status" :label="547" class="grade-bgc single-line hide defau"></el-radio>
            </template>
          </el-table-column>
          <el-table-column property="name" label="频繁每星期一次" width="80">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status" :label="557" class="grade-bgc single-line hide smallblue"></el-radio>
            </template>
          </el-table-column>
          <el-table-column property="name" label="非常频繁一星期几次" width="80">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status" :label="567" class="grade-bgc single-line hide midblue"></el-radio>
            </template>
          </el-table-column>
          <el-table-column property="name" label="每天" width="80">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status" :label="577" class="grade-bgc single-line hide bigblue"></el-radio>
            </template>
          </el-table-column>
        </el-table>
        <div class="error-tips" v-if="border.div6">
          此题为必答题，请回答小题
        </div>
      </div>
    </div>
    <!-- 矩形量表题30 工作压力-->
    <div class="div-question " :class="border.div6" v-show="currentPage === 3">
      <div class="title-question">
        <span class="required">*</span>
        下面是一些是关于您工作状态有关的描述。请仔细阅读每一个描述，根据您的直观感受做出选择。
        <div style="margin-top:8px;"></div>
        <el-table :data="matrixQues.question30" style="width: 100%" ref="myTable6">
          <el-table-column property="title" width="170">
          </el-table-column>
          <el-table-column property="date" label="完全不符合" width="120">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status" :label="615" class="grade-bgc single-line hide midred"></el-radio>
            </template>
          </el-table-column>
          <el-table-column property="name" label="比较不符合" width="120">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status" :label="625" class="grade-bgc single-line hide smallred"></el-radio>
            </template>
          </el-table-column>
          <el-table-column property="name" label="不确定" width="120">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status" :label="635" class="grade-bgc single-line hide defau"></el-radio>
            </template>
          </el-table-column>
          <el-table-column property="name" label="比较符合" width="120">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status" :label="645" class="grade-bgc single-line hide smallblue"></el-radio>
            </template>
          </el-table-column>
          <el-table-column property="name" label="非常符合" width="80">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status" :label="655" class="grade-bgc single-line hide midblue"></el-radio>
            </template>
          </el-table-column>
        </el-table>
        <div class="error-tips" v-if="border.div6">
          此题为必答题，请回答小题
        </div>
      </div>
    </div>
    <!-- 矩形量表题31 工作焦虑-->
    <!-- <div class="div-question " :class="border.div6" v-show="currentPage === 8">
      <div class="title-question">
        <span class="required">*</span>
        以下语句了解工作给您带来的负面感受，请认真阅读每个题目，根据近半年内的实际情况，选择最符合您自身情况的选项。
        <div style="margin-top:8px;" ></div>
        <el-table :data="matrixQues.question31" style="width: 100%" ref="myTable7">
          <el-table-column property="title" width="170">
          </el-table-column>
          <el-table-column property="date" label="完全不符合" width="120">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status" :label="715" class="grade-bgc single-line hide midred"></el-radio>
            </template>
          </el-table-column>
          <el-table-column property="name" label="比较不符合" width="120">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status" :label="725" class="grade-bgc single-line hide smallred"></el-radio>
            </template>
          </el-table-column>
          <el-table-column property="name" label="不确定" width="120">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status" :label="735" class="grade-bgc single-line hide defau"></el-radio>
            </template>
          </el-table-column>
          <el-table-column property="name" label="比较符合" width="120">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status" :label="745" class="grade-bgc single-line hide smallblue"></el-radio>
            </template>
          </el-table-column>
          <el-table-column property="name" label="非常符合" width="80">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.status" :label="755" class="grade-bgc single-line hide midblue"></el-radio>
            </template>
          </el-table-column>
        </el-table>
        <div class="error-tips" v-if="border.div6">
          此题为必答题，请回答小题
        </div>
      </div>
    </div> -->
    <!-- 分页 -->
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="1"
      layout="prev, pager, next"
      :total="totalPages"
    />
    <!-- 提交 -->
    <el-button type="primary" class="submit" @click="submit" v-if="currentPage === totalPages">
      提交
    </el-button>

    <!-- 进度条 -->
    <div class="footer">南昌航空大学&nbsp;&nbsp;提供技术支持</div>

    <div class="progress" ref="progress">
      <div>{{ percent }}%</div>
      <div class="progress-bar">
        <div class="progress-bgc">
          <span class="current" ref="current">
          </span>
        </div>
      </div>
      <div>进度</div>
    </div>
  </div>
</template>

<script>
import formData from './formData'
export default formData
</script>

<style scoped lang="less">
@import "./formData.less";
</style>
